<template>
  <div style="height: 100%; min-height: 100vh">
    <!-- <div class="cus_search">
      <div class="cus_search_left" :style="{
        width:
          value.length > 0
            ? 'calc(100% - 2.625rem)'
            : 'calc(100% - 1.125rem)',
      }">
        <img src="@/assets/img/search for@2x.png" alt="" />
        <input type="text" v-model="value" @focus="goSearch" />
        <img src="@/assets/img/delete@2x.png" alt="" v-if="value.length > 0" @click="emptyValue" />
      </div>
      <div class="cus_search_right" v-if="value.length > 0">取消</div>
    </div> -->
    <div class="deptCell">
      <div class="deptCell_item" v-for="(value, index) in departmentList" @click="screenClick($event, value)"
           :data-id="value.deptId" v-if="value.deptName!='核酸检测'">
        <div class="deptCell_item_1"> {{ value.deptName }}&nbsp;&nbsp;<img src="@/assets/img/phone.svg" alt=""
                                                                           style="width:15px" v-if="value.phone"
                                                                           @click.stop="callPhone($event,value.phone)">
        </div>
        <div class="deptCell_item_2">
          <div class="deptCell_item_2_content" :class="{ deptCell_item_2_noShow: value.isShow == false }">
            {{ value.desc.length > 0 ? value.desc : "暂无科室简介!" }}
          </div>
          <div class="deptCell_item_2_zk" @click.stop="showSwitch(index)">

            {{ !value.isShow ? "展开" : "收起" }}<img src="@/assets/img/zk.png" alt=""
                                                      :style="{ 'transform': value.isShow ? 'rotate(0deg)' : 'rotate(180deg)' }">


          </div>

        </div>
      </div>

    </div>
    <!-- <div class="dept_box">
      <div v-for="(value, index) in departmentList" @click="screenClick($event, value)" :data-id="value.deptId">
        <img :src="value.icon" alt="" />
        <div>{{ value.deptName }}</div>
      </div>
    </div> -->

    <!-- <div class="appo_box">
            <div class="appo_box_dep">
                <div class="dep" v-for="(value,index) in departmentList" @click="screenClick($event,value)" :data-id="value.deptId" :style="{'background-color':idx==value.deptId?'#F1F5F9':'#fff'}">
                    {{value.deptName}}
                </div>

            </div>
            <div class="appo_box_room" >
                <div class="room" v-for="(value,index) in room" @click="goAppointmentNext(value)">
                    {{value.deptName}}
                </div>
            </div>
        </div> -->
  </div>
</template>
<script>
import {getDeptInfo} from "@/api/api";

export default {
  components: {},
  data() {
    return {
      info: {
        patientId: "",
        isOnline: "0"
      },
      isNight: "",
      isToday: "",
      value: "",
      idx: null,
      departmentList: [
        // { name: "内科" },
        // { name: "外科" },
        // { name: "儿科" },
        // { name: "妇产科" },
        // { name: "耳鼻科/耳鼻科耳鼻科" }
      ],
      room: [],
    };
  },
  created() {
    this.info = this.$route.query;
    this.isNight = this.info.isNight;
    this.isToday = this.info.isToday;
    this.GetDeptInfo(this.info.parentId);
    // setTimeout(()=>{
    //     this.GetDeptInfoNext(this.departmentList[0].deptId)
    // },500)
  },
  methods: {
    callPhone(e, phoneNumber) {
      console.log(e)
      window.location.href = 'tel://' + phoneNumber;//+ '#mp.weixin.qq.com';
    },
    GetDeptInfo(parentId) {
      const data = {
        deptId: "",
        parentId: parentId,
        level: "1",
        isNight: this.isNight,
        isToday: this.isToday
      };
      getDeptInfo(data).then((res) => {
        if (res.code == 200) {
          var resData = res.data
          resData.forEach(element => {
            element.isShow = false
          });
          this.departmentList = resData;
        }
      });
    },
    GetDeptInfoNext(PDeptId) {
      const data = {
        PDeptId,
      };
      this.$api.regController.GetDeptInfo(data).then((res) => {
        if (res.code == 200) {
          this.room = res.data;
        }
      });
    },
    showSwitch(index) {
      this.departmentList[index].isShow = !this.departmentList[index].isShow
    },
    goSearch() {
      this.$router.push({path: "/doctor_search"});
    },
    goAppointmentNext(value) {
      var item = value
      var reg = new RegExp("\n", "g")
      item.tips = item.tips.replace(reg, "<br>")
      item.isNight = this.isNight
      item.isToday = this.isToday
      console.log('tip', item)
      this.$router.push({path: "/appointment_next", query: item});
    },
    emptyValue() {
      this.value = "";
    },
    screenClick(e, value) {
      if (!value.deptId) {
        alert(value.tips)
        return;
      }
      console.log(e)
      // console.log(e.target.dataset.id)
      // this.idx=e.target.dataset.id
      // this.GetDeptInfoNext(e.target.dataset.id)
      window.localStorage.removeItem("appoIdx");
      window.localStorage.removeItem("appoTabItemShow");
      // this.$router.push({ path: "/appointment_next", query: value });
      var item = value
      var reg = new RegExp("\n", "g")
      item.tips = item.tips.replace(reg, "<br>")
      item.isOnline = this.info.isOnline
      item.isNight = this.info.isNight
      item.isToday = this.info.isToday
      console.log('tip', item)
      this.$router.push({path: "/appointment_next", query: item});
    },
  },
};
</script>
<style scoped>
.deptCell_item {
  margin: 0.75rem 1rem;
  background: #FFFFFF;
  box-shadow: 0px 0px 0.9375rem 0px rgba(174, 206, 254, 0.3000);
  border-radius: 0.375rem;
  padding: 0.8125rem;
}

.deptCell_item_1 {
  font-size: 1.0625rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #131A2A;
  line-height: 1.25rem;
  margin-bottom: 0.8125rem;
}

.deptCell_item_2 {
  padding: 0.1rem 0;
  background: #F4F8FC;
  border-radius: 0.3125rem;
  position: relative;


}

.deptCell_item_2 .deptCell_item_2_content {
  margin: 0.8125rem;
  font-size: 0.875rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #949FB4;
  line-height: 1.375rem;
}

.deptCell_item_2_zk {

  width: 7.5rem;
  height: 1.25rem;
  color: #4A92FF !important;
  background-image: linear-gradient(to right, rgba(244, 248, 252, .65), rgba(244, 248, 252, 1));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;

}

.deptCell_item_2_zk img {
  width: 0.625rem;
  height: 0.3125rem;
  margin-left: 0.375rem;
  /* transform: rotate(180deg); */
}

.deptCell_item_2_noShow {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cus_search {
  width: calc(100% - 2rem);
  height: 2.125rem;
  padding: 0.3125rem 1rem;
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  color: #131a2a;
}

.cus_search_left {
  width: calc(100% - 1.125rem);
  height: 2.125rem;
  padding: 0 0.5625rem;
  display: flex;
  align-items: center;
  background: rgba(247, 250, 253, 1);
  border-radius: 1.125rem;
}

.cus_search_left > img {
  width: 1.375rem;
  height: 1.375rem;
}

.cus_search_left > img:nth-of-type(1) {
  margin-right: 0.375rem;
}

.cus_search_left > input {
  width: calc(100% - 3.125rem);
  padding: 0px 0.1875rem;
  height: 100%;
  border: none;
  background: rgba(247, 250, 253, 1);
  outline: none;
}

.cus_search_right {
  width: 2.625rem;
  text-align: right;
}

.appo_box {
  height: calc(100vh - 44px);
  background-color: #f1f5f9;
  display: flex;
  font-size: 0.9375rem;
}

.appo_box_dep {
  width: 8.4375rem;
  height: 100%;
  overflow-y: scroll;
}

.appo_box_dep .dep {
  width: 6.3125rem;
  padding: 0.9375rem 1.0625rem;
  text-align: center;
  font-weight: bold;
  background: rgba(255, 255, 255, 1);
  border-radius: 0px 0.3125rem 0.3125rem 0px;
  margin-bottom: 0.0625rem;
}

.appo_box_room {
  width: calc(100% - 8.4375rem);
  height: 100%;
  overflow-y: scroll;
}

.appo_box_room .room {
  width: calc(100% - 2.125rem);
  padding: 0.9375rem 1.0625rem;
  text-align: center;
  margin-bottom: 0.0625rem;
}

.dept_box {
  width: 100%;
  display: flex;
  align-items: center;
  flex-flow: wrap;
}

.dept_box > div {
  width: calc(100% / 4);
  height: 6.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;

}

.dept_box > div > img {
  width: 1.875rem;
  height: 1.875rem;
  object-fit: contain;
  margin-bottom: 0.9375rem;
}

.dept_box > div > div {
  width: 100%;
  font-size: 0.6875rem;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  /* text-overflow: ellipsis; */
}
</style>
